<template>
      <h1 style="position:relative;text-align: center;top: -30px">法律援助申请⚖</h1>
      <el-image :src="src" style="position: absolute; width: 700px"></el-image>
      <el-form :model="form" label-width="auto" style="position:relative;left:750px;top:28px;max-width: 600px;"  :rules="rules">
            <el-form-item label="申请人" prop="persona">
                  <el-input v-model="form.persona"/>
            </el-form-item>
            <el-form-item label="申请人身份证号" prop="carda">
                  <el-input v-model="form.carda"/>
            </el-form-item>
            <el-form-item label="被申请人" prop="personb">
                  <el-input v-model="form.personb"/>
            </el-form-item>
            <el-form-item label="被申请人身份证号" prop="cardb">
                  <el-input v-model="form.cardb"/>
            </el-form-item>
            <el-form-item label="案由类别">
                  <el-select v-model="form.species" placeholder="请选择您的案由类型！" prop="species">
                        <el-option label="刑事案由" value="0"/>
                        <el-option label="民事案由" value="1"/>
                        <el-option label="行政案由" value="2"/>
                  </el-select>
            </el-form-item>
            <el-form-item label="案由时间">
                  <el-col :span="11">
                        <el-date-picker
                                  v-model="form.dt"
                                  placeholder="日期"
                                  style="width: 100%"
                                  type="date"
                        />
                  </el-col>
            </el-form-item>
            <el-form-item label="默认状态-未处理" prop="state"  style="display: none">
                  <el-input v-model="form.state" value="1"/>
            </el-form-item>
            <el-form-item label="案由标志" style="display: none">
                  <el-input v-model="form.flag" prop="flag" value="1"/>
            </el-form-item>
            <el-form-item label="案由详情" prop="content">
                  <el-input v-model="form.content" prop="content" type="textarea"/>
            </el-form-item>
            <br>
            <el-form-item style="position:absolute;left:240px;">
                  <el-button type="success" @click="toSubmit">提交申请</el-button>
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  <el-button type="danger" @click="toCancel">取消申请</el-button>
            </el-form-item>
      </el-form>
</template>

<script>

export default {
      name: "aidApply",
      data() {
            return {
                  user:{},
                  src: "src/assets/2.png",
                  form: {
                        id: '',
                        persona: '',
                        carda: '',
                        personb: '',
                        cardb: '',
                        content: '',
                        state:'',
                        species: '',
                        flag: '1',
                        dt: '',
                  },
                  rules: {
                        carda: [
                              {required: true, message: '请输入身份证号', trigger: 'blur'},
                              {
                                    pattern: /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
                                    message: '请输入正确的身份证号',
                                    trigger: 'blur'}],
                       cardb: [
                             {required: true, message: '请输入身份证号', trigger: 'blur'},
                             {
                                   pattern: /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
                                   message: '请输入正确的身份证号',
                                   trigger: 'blur'}],
                        content: [{required: true, message: '请认真输入案由详情', trigger: 'blur'}]
                  },
            }
      },
      methods: {
            toSubmit() {
                  console.log(this.form)
                  this.$axios.post('http://localhost:8088/lawcase/apply', this.form).then(res => res.data).then(res => {
                        console.log(res.data)
                        if (res.code === 200) {
                              this.$message({
                                    message: 'Congrats, this is a success message.',
                                    type: 'success',
                              })
                              console.log("用户名："+this.form.name)
                              this.$router.push('/')
                        } else {
                              this.$message({
                                    message: 'Regret, this is a error message.',
                                    type: 'danger',
                              })

                        }
                  })

            },
            toCancel() {
                  this.$router.push("/")
            },
            init(){
                  this.user = JSON.parse(sessionStorage.getItem('CurUser'))
                  console.log(JSON.parse(sessionStorage.getItem('CurUser')))
            }
      },
      created() {
            this.init()
      }
}
</script>
